Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Size Report

Bundles

Usages

Open in StackBlitz

npm i https://pkg.pr.new/@vue/compiler-core@13630

npm i https://pkg.pr.new/@vue/compiler-dom@13630

npm i https://pkg.pr.new/@vue/compiler-sfc@13630

npm i https://pkg.pr.new/@vue/compiler-ssr@13630

npm i https://pkg.pr.new/@vue/compiler-vapor@13630

npm i https://pkg.pr.new/@vue/reactivity@13630

npm i https://pkg.pr.new/@vue/runtime-core@13630

npm i https://pkg.pr.new/@vue/runtime-dom@13630

npm i https://pkg.pr.new/@vue/runtime-vapor@13630

npm i https://pkg.pr.new/@vue/server-renderer@13630

npm i https://pkg.pr.new/@vue/shared@13630

npm i https://pkg.pr.new/vue@13630

npm i https://pkg.pr.new/@vue/compat@13630

commit: d50620c

Hi! @edison1105
I've committed a version that replaces JSON.stringify with a custom escape function, and wraps the template strings with backticks (`) instead of double quotes ("). I bundled and tested the output and it successfully fixes the issue.

This change breaks the existing unit tests because previous snapshots were based on template strings wrapped with double quotes. I'm not sure whether this change might break anything else beyond the existing tests, so I’d appreciate your review and feedback before proceeding further.

The current implementation of this PR still has the following issues:

1. The template string parameter within the generated _template(...) template creation has an incorrect implementation. It converts to _template(``<img src="" + _imports_0 + "" alt="..." >``), which breaks the src attribute's value.

2. Currently, transformNativeElement has a fundamental problem:

interface IREffect {
  // Here, `expressions` was previously considered to only be `SimpleExpressionNode` in its type.
  expressions: (SimpleExpressionNode | CompoundExpressionNode)[]
  operations: OperationNode[]
}

Therefore, for srcset's multiple import string variable concatenating operations, it cannot be properly parsed and recognized, leading to it ultimately being classified as a dynamic expression and thus unable to be statically hoisted.

Thus, transformNativeElement needs to categorize and discuss the expression types to determine whether they can be statically hoisted as a whole:

• simple expression / string / symbol = can be directly hoisted
• compound expression = recursive judgment
• interpolation expression = judge whether the interpolated expression can be hoisted

Thanks for your response @ShenQingchuan! I’ve also encountered this with assetURLs. Since IRProp is currently typed to only accept SimpleExpressionNode:

export interface IRProp extends Omit<DirectiveTransformResult, 'value'> {
  values: SimpleExpressionNode[]
}

…it becomes tricky to support cases like:

<use href="~@svg/file.svg#fragment"></use>

In this case, the prop value is actually _imports_0 + '#fragment', but it’s wrapped as a single SimpleExpressionNode, even though it’s clearly a compound expression. This makes it difficult to correctly extract or manipulate the individual parts, especially for asset URL resolution.

I’m currently trying to work around this, though it’s a bit challenging for me.

❌ Deploy Preview for vue-sfc-playground failed. Why did it fail? →